<template>
	<div class="page-warp">
		<!--悬浮栏-->
		<div class="fix-bar">
			<span class="bg"></span>
			<h3 class="logo">车享家logo</h3>
			<div class="text">
				<h4 class="title">车享家APP</h4>
				<em class="cont">领取258元养车礼包</em>
			</div>
			<a href="#" class="bar-link">前往</a>
		</div>
		<!--banner-->
		<div class="banner">
			<img class="banner-img" src="../../../assets/image/tuan/banner.jpg" alt="商品图片">
		</div>
		<!--详情页信息-->
		<div class="page-info">
			<div class="info-head">
				<i class="icon-type">新人团</i><span class="info-head-title">限未到店新客参团</span><span class="info-head-msg"><em>2450</em>人已成团</span>
			</div>
			<h3 class="info-title">依恋家纺车载三USB器+数据线</h3>
			<p class="info-cont">
				宝儿童体验馆，51个场馆是您和宝贝的夏日清凉亲宝贝的夏日清凉亲宝贝的夏字体验的不二之选，还在等什么呢？？哈哈哈啊哈哈哈哈哈哈哈哈
			</p>
		</div>
		<!--团推荐-->
		<div class="recommend">
			<recommend></recommend>
		</div>
		<!--查看使用门店-->
		<div class="quer-store">
			<query-store></query-store>
		</div>
		<!--活动规则-->
		<div class="rule">
			<rule></rule>
		</div>
		<!--商品描述-->
		<div class="describe">
			<describe></describe>
		</div>
		<!--按钮-->
		<div class="page-goto clearfix">
			<a href="#" class="tuan-btn"><span class="price">&yen;190</span><span class="text">直接购买</span></a>
			<a href="#" class="link"><span class="price">&yen;150</span><span class="text">2人参团</span></a>
		</div>
	</div>
</template>

<script>
	import common from '../../../assets/js/common';
	import recommend from '../common/recommend.vue';//团推荐
	import queryStore from '../common/queryStore.vue';//选择门店
	import rule from '../common/rule.vue';//规则
	import describe from '../common/describe.vue';//商品描述
	import Vue from 'vue';
	import {Toast, MessageBox} from 'mint-ui';
	//import shareImg from "../../../static/image/shareimg.png";
	export default{
		data (){
			return {
			};
		},
		components: {
			recommend,queryStore,rule,describe
		},
		created (){
		},
		mounted (){
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	@import "../../../assets/css/reset.scss";
	@import "../../../assets/css/common.scss";
	html, body {
		height: 100%;
	}
	.page-warp {
		
	}
	/*banner*/
	.banner{
		width:100%;
		height:rem(250);
		overflow:hidden;
		.banner-img{
			width:100%;
			height:100%;
		}
	}
	.page-info{
		padding:0 rem(15);
	}
	/*详情页信息*/
	.page-info{
		background-color:#fff;
		padding-bottom:rem(17);
		margin-bottom:rem(8);
		.info-head{
			font-size:rem(11);
			color:#ff6600;
			padding:rem(15) 0;
		}
		.info-title{
			font-size:rem(17);
			color:#000;
			margin-bottom:rem(5);
		}
		.info-cont{
			font-size:rem(13);
			height:rem(32);
			overflow:hidden;
			color:#888;
		}
		/*info-head团购状态的小标签*/
		.icon-type{
			width:rem(43);
			height:rem(18);
			line-height:rem(18);
			text-align:center;
			display:inline-block;
			background-color:#ffefe5;
			margin-right:rem(11);
		}
		/*info-head标题*/
		.info-head-title{
		}
		/*info-head信息*/
		.info-head-msg{
			float:right;
			font-size:rem(13);
			color:#b1b1b1;
			em{
				color:#ff6600;
			}
		}
	}
	/*团推荐*/
	.recommend{
		margin-bottom:rem(8);
	}
	/*查看使用门店*/
	.quer-store{
		margin-bottom:rem(8);
	}
	/*活动规则*/
	.rule{
		margin-bottom:rem(8);
	}
	/*按钮*/
	.page-goto{
		width:100%;
		border-top:1px solid #e7e7e7;
		padding:rem(8) 0;
		background-color:#fff;
		position:fixed;
		bottom:0;
		.tuan-btn, .link{
			width:rem(168);
			height:rem(42);
			line-height:rem(42);
			border:1px solid #ff6600;
			border-radius:4px;
			display:block;
			text-align:center;
		}
		.tuan-btn{
			float:left;
			font-size:0;
			background-color:#ffefe5;
			color:#ff6600;
			margin-left:rem(8);
			.price{
				font-size:rem(19);
			}
			.text{
				font-size:rem(11);
			}

		}
		.link{
			float:right;
			font-size:0;
			background-color:#ff6600;
			color:#fff;
			margin-right:rem(8);
			.price{
				font-size:rem(19);
			}
			.text{
				font-size:rem(11);
			}
		}
	}
	/*商品描述*/
	.describe{
		padding-bottom:rem(55);
	}
	/*悬浮栏*/
	.fix-bar{
		width:100%;
		padding:rem(8) rem(10);
		position:fixed;
		top:0;
		left:0;
		.bg{
			position:absolute;
			top:0;
			left:0;
			right:0;
			bottom:0;
			opacity:0.8;
			background-color:#000;
			z-index:-1;
		}
		.logo{
			background:url('../../../assets/image/tuan/logo.png') no-repeat;
			background-size:100% 100%;
			text-indent:-99999px;
			width:rem(36);
			height:rem(36);
			float:left;
			margin-right:rem(10);
		}
		.text{
			float:left;
			.title{
				font-size:rem(15);
				color:#fff;
				display:block;
			}
			.cont{
				font-size:rem(12);
				color:#fff;
				display:block;
			}
		}
		.bar-link{
			width:rem(66);
			height:rem(34);
			line-height:rem(34);
			text-align:center;
			font-size:rem(13);
			float:right;
			color:#fff;
			background-color:#0084ff;
			border-radius:5px;
		}
	}
</style>
